{% extends 'base.html' %}
{% load static %}

{% block title %}维修记录详情 - {{ maintenance.title }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-tools me-2"></i>维修记录详情</h5>
                    {% if can_edit %}
                        <a href="{% url 'assets:maintenance_update' maintenance.pk %}" class="btn btn-primary btn-sm">
                            <i class="fas fa-edit me-1"></i>编辑记录
                        </a>
                    {% endif %}
                </div>
                
                <div class="card-body">
                    <!-- 维修基本信息 -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h6 class="card-title"><i class="fas fa-laptop me-2"></i>资产信息</h6>
                                    <table class="table table-borderless table-sm mb-0">
                                        <tr>
                                            <td><strong>资产名称：</strong></td>
                                            <td>{{ maintenance.asset.name }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>资产编号：</strong></td>
                                            <td><code>{{ maintenance.asset.asset_number }}</code></td>
                                        </tr>
                                        <tr>
                                            <td><strong>资产类别：</strong></td>
                                            <td>{{ maintenance.asset.category.name }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>当前状态：</strong></td>
                                            <td><span class="badge bg-secondary">{{ maintenance.asset.get_status_display }}</span></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h6 class="card-title"><i class="fas fa-info-circle me-2"></i>维修信息</h6>
                                    <table class="table table-borderless table-sm mb-0">
                                        <tr>
                                            <td><strong>维修类型：</strong></td>
                                            <td>
                                                {% if maintenance.maintenance_type == 'preventive' %}
                                                    <span class="badge bg-info">{{ maintenance.get_maintenance_type_display }}</span>
                                                {% elif maintenance.maintenance_type == 'corrective' %}
                                                    <span class="badge bg-warning">{{ maintenance.get_maintenance_type_display }}</span>
                                                {% elif maintenance.maintenance_type == 'emergency' %}
                                                    <span class="badge bg-danger">{{ maintenance.get_maintenance_type_display }}</span>
                                                {% else %}
                                                    <span class="badge bg-primary">{{ maintenance.get_maintenance_type_display }}</span>
                                                {% endif %}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>当前状态：</strong></td>
                                            <td>
                                                {% if maintenance.status == 'pending' %}
                                                    <span class="badge bg-secondary">{{ maintenance.get_status_display }}</span>
                                                {% elif maintenance.status == 'in_progress' %}
                                                    <span class="badge bg-primary">{{ maintenance.get_status_display }}</span>
                                                {% elif maintenance.status == 'completed' %}
                                                    <span class="badge bg-success">{{ maintenance.get_status_display }}</span>
                                                {% else %}
                                                    <span class="badge bg-light text-dark">{{ maintenance.get_status_display }}</span>
                                                {% endif %}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>优先级：</strong></td>
                                            <td>
                                                {% if maintenance.priority == 'urgent' %}
                                                    <span class="badge bg-danger">{{ maintenance.get_priority_display }}</span>
                                                {% elif maintenance.priority == 'high' %}
                                                    <span class="badge bg-warning">{{ maintenance.get_priority_display }}</span>
                                                {% elif maintenance.priority == 'medium' %}
                                                    <span class="badge bg-info">{{ maintenance.get_priority_display }}</span>
                                                {% else %}
                                                    <span class="badge bg-secondary">{{ maintenance.get_priority_display }}</span>
                                                {% endif %}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>是否逾期：</strong></td>
                                            <td>
                                                {% if maintenance.is_overdue %}
                                                    <span class="badge bg-warning"><i class="fas fa-exclamation-triangle me-1"></i>是</span>
                                                {% else %}
                                                    <span class="badge bg-success"><i class="fas fa-check me-1"></i>否</span>
                                                {% endif %}
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 维修详情 -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h6 class="mb-0">维修详情</h6>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <strong>维修标题：</strong>
                                <h5 class="mt-2">{{ maintenance.title }}</h5>
                            </div>
                            
                            <div class="mb-3">
                                <strong>问题描述：</strong>
                                <div class="border rounded p-3 mt-2 bg-light">
                                    {{ maintenance.description|linebreaks }}
                                </div>
                            </div>
                            
                            {% if maintenance.solution %}
                                <div class="mb-3">
                                    <strong>解决方案：</strong>
                                    <div class="border rounded p-3 mt-2 bg-success bg-opacity-10">
                                        {{ maintenance.solution|linebreaks }}
                                    </div>
                                </div>
                            {% endif %}
                            
                            {% if maintenance.notes %}
                                <div class="mb-3">
                                    <strong>备注信息：</strong>
                                    <div class="border rounded p-3 mt-2 bg-light">
                                        {{ maintenance.notes|linebreaks }}
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <!-- 时间线 -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h6 class="mb-0">维修时间线</h6>
                        </div>
                        <div class="card-body">
                            <div class="timeline">
                                <div class="timeline-item">
                                    <div class="timeline-marker bg-primary"></div>
                                    <div class="timeline-content">
                                        <h6 class="timeline-title">报告维修</h6>
                                        <p class="timeline-text">{{ maintenance.reported_at|date:"Y-m-d H:i" }}</p>
                                        <small class="text-muted">报告人：{{ maintenance.reporter.get_full_name|default:maintenance.reporter.username }}</small>
                                    </div>
                                </div>
                                
                                {% if maintenance.scheduled_at %}
                                    <div class="timeline-item">
                                        <div class="timeline-marker bg-info"></div>
                                        <div class="timeline-content">
                                            <h6 class="timeline-title">计划维修时间</h6>
                                            <p class="timeline-text">{{ maintenance.scheduled_at|date:"Y-m-d H:i" }}</p>
                                        </div>
                                    </div>
                                {% endif %}
                                
                                {% if maintenance.started_at %}
                                    <div class="timeline-item">
                                        <div class="timeline-marker bg-warning"></div>
                                        <div class="timeline-content">
                                            <h6 class="timeline-title">开始维修</h6>
                                            <p class="timeline-text">{{ maintenance.started_at|date:"Y-m-d H:i" }}</p>
                                        </div>
                                    </div>
                                {% endif %}
                                
                                {% if maintenance.completed_at %}
                                    <div class="timeline-item">
                                        <div class="timeline-marker bg-success"></div>
                                        <div class="timeline-content">
                                            <h6 class="timeline-title">维修完成</h6>
                                            <p class="timeline-text">{{ maintenance.completed_at|date:"Y-m-d H:i" }}</p>
                                            {% if maintenance.duration_hours %}
                                                <small class="text-muted">耗时：{{ maintenance.duration_hours }} 小时</small>
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 侧边栏 -->
        <div class="col-md-4">
            <!-- 人员信息 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0"><i class="fas fa-users me-2"></i>人员信息</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <strong>报告人：</strong><br>
                        <span class="text-primary">{{ maintenance.reporter.get_full_name|default:maintenance.reporter.username }}</span>
                    </div>
                    
                    {% if maintenance.technician %}
                        <div class="mb-3">
                            <strong>维修技师：</strong><br>
                            <span class="text-success">{{ maintenance.technician.get_full_name|default:maintenance.technician.username }}</span>
                        </div>
                    {% else %}
                        <div class="mb-3">
                            <strong>维修技师：</strong><br>
                            <span class="text-muted">未指定</span>
                        </div>
                    {% endif %}
                    
                    {% if maintenance.supplier %}
                        <div class="mb-3">
                            <strong>维修供应商：</strong><br>
                            <span class="text-info">{{ maintenance.supplier.name }}</span>
                        </div>
                    {% endif %}
                </div>
            </div>
            
            <!-- 成本信息 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0"><i class="fas fa-money-bill-wave me-2"></i>成本信息</h6>
                </div>
                <div class="card-body">
                    {% if maintenance.estimated_cost %}
                        <div class="mb-3">
                            <strong>预估成本：</strong><br>
                            <span class="text-warning">¥{{ maintenance.estimated_cost }}</span>
                        </div>
                    {% endif %}
                    
                    {% if maintenance.actual_cost %}
                        <div class="mb-3">
                            <strong>实际成本：</strong><br>
                            <span class="text-danger">¥{{ maintenance.actual_cost }}</span>
                        </div>
                    {% endif %}
                    
                    {% if not maintenance.estimated_cost and not maintenance.actual_cost %}
                        <p class="text-muted mb-0">暂无成本信息</p>
                    {% endif %}
                </div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0"><i class="fas fa-cogs me-2"></i>操作</h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{% url 'assets:maintenance_list' %}" class="btn btn-outline-secondary">
                            <i class="fas fa-list me-1"></i>返回列表
                        </a>
                        
                        {% if can_edit %}
                            <a href="{% url 'assets:maintenance_update' maintenance.pk %}" class="btn btn-primary">
                                <i class="fas fa-edit me-1"></i>编辑记录
                            </a>
                        {% endif %}
                        
                        <a href="{% url 'assets:asset_detail' maintenance.asset.pk %}" class="btn btn-outline-info">
                            <i class="fas fa-eye me-1"></i>查看资产
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dee2e6;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.timeline-marker {
    position: absolute;
    left: -22px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #dee2e6;
}

.timeline-content {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    border-left: 3px solid #dee2e6;
}

.timeline-title {
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 600;
}

.timeline-text {
    margin-bottom: 5px;
    font-size: 14px;
}
</style>
{% endblock %}
